<script>
import {axiosGetPersonInfo, axiosSetPersonInfo} from "../api";
import personMenu from "../pages/personMenu.vue";

export default {
  name: "personInfo",
  data() {
    return {
      userName: "我是昵称",
      userSex: "",
      userTag: "",
      userIntroduce: "",
      disabled: "",
      change: false,
    }
  },
  beforeMount() {
    this.getPersonInfo();
  },
  methods: {
    async getPersonInfo() {
      let result = await axiosGetPersonInfo({account: this.account, password: this.password});
      if (result.status === 200) {
        this.userName = result.data.userName;
        this.userSex = result.data.gender;
        this.userTag = result.data.label;
        this.userIntroduce = result.data.introduction;
      }
    },
    setPersonInfo() {
      axiosSetPersonInfo({account: this.account, password: this.password, type: "gender", value: this.userSex});
      axiosSetPersonInfo({account: this.account, password: this.password, type: "label", value: this.userTag});
      axiosSetPersonInfo({account: this.account, password: this.password, type: "username", value: this.userName});
      axiosSetPersonInfo({account: this.account, password: this.password, type: "introduction", value: this.userIntroduce});
      this.change = false;
    }
  },
  components: {personMenu}
}
</script>

<template>
  <div id="personInfo">
    <div class="person-info-box">
      <el-col :lg="5" :md="6" :sm="6" :xl="4" :xs="8">
        <div class="grid-content">
          <personMenu/>
        </div>
      </el-col>
      <el-col :lg="19" :md="18" :sm="18" :xl="20" :xs="16">
        <div class="grid-content">
          <div class="info">
            <p>个人信息</p>
            <div class="info-box">
              <div class="info-user-img">
                <p>头像</p>
                <img alt="" src="../img/headImg.jpg" width="100">
              </div>
              <el-descriptions :column="4" border class="info-user-information" direction="vertical" title="">
                <el-descriptions-item label="uuid"></el-descriptions-item>
                <el-descriptions-item label="昵称">
                  <el-input v-show="change" v-model="userName" lok/>
                  <span v-show="!change">{{ userName }}</span></el-descriptions-item>
                <el-descriptions-item label="性别">
                  <el-input v-show="change" v-model="userSex" lok/>
                  <span v-show="!change">{{ userSex }}</span></el-descriptions-item>
                <el-descriptions-item :span="2" label="个人标签">
                  <el-input v-show="change" v-model="userTag" lok/>
                  <span v-show="!change">{{ userTag }}</span></el-descriptions-item>
                <el-descriptions-item label="简介">
                  <el-input v-show="change" v-model="userIntroduce" lok/>
                  <span v-show="!change">{{ userIntroduce }}</span></el-descriptions-item>
              </el-descriptions>
              <div class="info-change">
                <el-button v-show="!change" @click="change=true">修改</el-button>
                <el-button v-show="change" @click="setPersonInfo()">保存</el-button>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </div>
  </div>
</template>

<style scoped src="../style/person-info.css">

</style>